<template>
    <div class="book-detail">
        <div v-if="loading">Loading...</div>
        <div v-else-if="error" class="error">{{ error }}</div>
        <div v-else-if="book">
            <h1>{{ book.book_name }}</h1>
            <div>ID: {{ book.id }}</div>
            <div>类别: {{ book.category }}</div>
            <div>ISBN: {{ book.ISBN }}</div>
            <div>出版社: {{ book.publisher }}</div>
            <div>作者: {{ book.author }}</div>
            <div>出版日期: {{ book.publishingyear }}</div>
            <div>库存: {{ book.inventory }}</div>
            <div v-html="book.summary"></div> <!-- 假设简介是HTML格式 -->
            <img :src="book.coverImage" alt="Cover Image" /> <!-- 假设封面图片URL是book.coverImage -->
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const bookId = ref(null); // 假设你有一个方法来获取当前书籍的ID
const book = ref(null);
const loading = ref(false);
const error = ref(null);

const fetchBook = async () => {
    loading.value = true;
    error.value = null;
    try {
        // 假设后端API的URL和参数是这样的
        const bookResponse = await axios.get(`/api/book/${bookId.value}`);
        book.value = bookResponse.data;
    } catch (e) {
        error.value = 'Failed to fetch book data';
    } finally {
        loading.value = false;
    }
};

const fetchInformation = async () => {
    try {
        const informationResponse = await axios.get(`/api/information/${bookId.value}`);
        if (book.value) {
            book.value.summary = informationResponse.data.summary;
            book.value.coverImage = informationResponse.data.coverImage;
        }
    } catch (e) {
        error.value = 'Failed to fetch book information';
    }
};

onMounted(() => {
    if (bookId.value) {
        fetchBook();
        fetchInformation();
    }
});
</script>

<style scoped>
.book-detail {
    /* 样式 */
}
.error {
    color: red;
}
</style>